<template>
    <div class="translation-history">
        <div class="history-title">
            <div class="title">
                <div class="left">
                    <div class="history-text">
                        <el-icon>
                            <Collection/>
                        </el-icon>
                        <span class="text">翻译历史</span>
                    </div>
                    <div class="search">
                        <el-input clearable placeholder="搜索翻译历史" v-model.trim="historyForm.q"/>
                    </div>
                </div>
                <div class="right">
                    <div>
                        <span class="color"></span>
                        <span class="text">已保存</span>
                    </div>
                    <div>
                        <span class="color"></span>
                        <span class="text">未保存</span>
                    </div>
                </div>
            </div>
            <div class="clear-all" v-if="translateHistoryList.length"
                 @click="handleClearAllTranslationHistoryTag">
                <el-link type="danger" :underline="false">清空</el-link>
            </div>
        </div>
        <div class="history-list" v-if="translateHistoryList.length">
            <el-tag v-for="history in translateHistoryList" :key="history.translateHistoryId"
                    class="history-item" closable
                    :type="!history.saveFlag ? 'info' : 'success'"
                    @close="handleRemoveTranslationHistoryTag(history.translateHistoryId)"
                    @click="handleClickTranslationHistoryTag(history)">
                {{ history.q }}
            </el-tag>
        </div>
        <div v-else class="empty-tips">这里空空如也哟~</div>
    </div>
</template>

<script setup>
import {getCurrentInstance, ref, watch} from "vue";
import {delTranslateHistory, listTranslateHistory} from "@/api/business/TranslateHistory";
import useUserStore from "@/store/modules/user";
import {debounceMs} from "@/config";

const {proxy} = getCurrentInstance()
const userStore = useUserStore();
const translateHistoryList = ref([]);
const translateHistoryId = ref(-1);
const historyForm = ref({
    q: "",
    pageNum: 1,
    pageSize: 20,
})
const props = defineProps({
    productId: {
        type: Number,
        required: true
    },
    translateHistoryId: {
        type: Number,
        default: -1
    },
    currentTranslateHistory: {
        type: Object,
        default: () => {
            return {
                saveFlag: false
            }
        }
    }
})
const emits = defineEmits(['tagClick', 'update:translateHistoryId', 'update:currentTranslateHistory'])
/**
 * 筛选
 */
const timer = ref(0);
const historyFormQWatch = watch(() => historyForm.value.q, (value) => {
    clearTimeout(timer.value);
    timer.value = setTimeout(() => {
        getTranslationHistoryList()
    }, debounceMs);
})
/**
 * 清空翻译历史
 */
const handleClearAllTranslationHistoryTag = () => {
    const translateHistoryIdsArr = translateHistoryList.value.map(x => x.translateHistoryId);
    const translateHistoryIds = translateHistoryIdsArr.join(",");
    handleRemoveTranslationHistoryTag(translateHistoryIds);
}
/**
 * 移除翻译历史tag
 */
const handleRemoveTranslationHistoryTag = (translateHistoryIds) => {
    delTranslateHistory(translateHistoryIds).then(() => {
        proxy.$modal.msgSuccess("删除成功");
        getTranslationHistoryList();
    });
}

/**
 * 点击翻译历史tag
 */
const handleClickTranslationHistoryTag = (history) => emits('tagClick', history);
/**
 * 获取翻译历史记录
 */
const getTranslationHistoryList = () => {
    listTranslateHistory({
        userId: userStore.id,
        productId: props.productId,
        ...historyForm.value
    }).then(response => {
        translateHistoryList.value = response.rows;
    });
}
watch(translateHistoryList, (val) => {
    emits('update:translateHistoryId', val?.[0]?.translateHistoryId || -1);
    emits('update:currentTranslateHistory', val?.[0] || {saveFlag: true})
}, {
    deep: true
})
defineExpose({
    getTranslationHistoryList
})
getTranslationHistoryList()
</script>

<style scoped lang="scss">
.translation-history {
  min-height: 200px;
  background-color: #FFFFFF;
  border-radius: 6px;
  margin-top: 20px;
  padding: 10px 20px 20px;

  .empty-tips {
    font-size: 14px;
    color: #aaa;
  }

  .history-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    color: #409EFF;

    .title {
      display: flex;
      align-items: center;

      .left {
        display: flex;
        align-items: center;

        .history-text {
          display: flex;
          align-items: center;
        }

        .text {
          margin-left: 6px;
        }

        margin-right: 20px;
      }

      .right {
        display: flex;
        align-items: center;

        .color {
          width: 10px;
          height: 10px;
          display: block;
          margin-right: 6px;
          border-radius: 2px;
        }

        div {
          display: flex;
          align-items: center;
        }

        div:first-child {
          margin-right: 10px;
          color: var(--el-color-success);

          .color {
            background: var(--el-color-success);
          }
        }

        div:last-child {
          color: var(--el-color-info) !important;

          .color {
            background: var(--el-color-info) !important;
          }
        }
      }
    }
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;
  }

  .history-item {
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
}

.search {
  margin-left: 20px;

  :deep(.el-input__wrapper) {
    background: #efefef;
  }

  :deep(.el-input) {
    input {
      border-radius: 6px;
      font-size: 16px;
    }
  }
}
</style>
